﻿@model IEnumerable<MobileWebsiteGenerator.Entities.ThemeDetail>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";

 
  
}
<style type="text/css">
    #main
    {
        width: 824px;
        margin: 0 auto;
    }
    #images
    {
        display: none;
        margin: 0 24px;
        float: left;
        width: 765px;
    }
    #right, #left
    {
        display: inline;
        float: left;
        padding-top: 23px;
    }
    #right a img, #left a img
    {
        height: 40px;
        width: 20px;
        border: none;
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
    }
    #right a:hover img, #left a:hover img
    {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
    }
    #right a, #left a
    {
        outline: none;
    }
    .panel
    {
        margin: 0 0 12px 0;
    }
    ul.exposureThumbs
    {
        background: #333;
        border: 3px solid #333;
        border-right: none;
        padding: 0;
        margin: 0;
        list-style-type: none;
        height: 79px;
    }
    ul.exposureThumbs li
    {
        background: #111;
        margin: 0 3px 0 0;
        padding: 0;
        text-align: center;
        display: none;
        float: left;
    }
    ul.exposureThumbs li img
    {
        cursor: pointer;
    }
    ul.exposureThumbs li.last
    {
        margin: 0;
    }
    .exposureTarget
    {
        width: 800px;
        height: 600px;
        background-color: #111;
        background-image: url(res/loader.gif);
        background-repeat: no-repeat;
        background-position: center center;
        padding: 0;
        margin: 0 auto;
        border: 3px solid #333;
        position: relative;
        overflow: hidden;
    }
    .exposureWrapper
    {
        position: absolute;
        top: 0;
        left: 0;
    }
    .exposureWrapper img
    {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
    }
    .exposureLoaded
    {
        background-image: none;
    }
    .exposureData
    {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60px;
        padding: 7px;
        background-image: url(res/veil.png);
        color: #fff;
        font-size: 16px;
        font-weight: bold;
    }
    /* In this demo we are using thumbs with fixed size */ul.exposureThumbs li
    {
        width: 150px;
        height: 79px;
    }
    .exposureSlideshowControls a
    {
        font-size: 11px;
        color: #bba;
        text-decoration: none;
        outline: none;
        padding: 2px 6px;
        display: inline;
    }
    .exposureSlideshowControls a:active, .exposureSlideshowControls a:hover
    {
        background-color: #999;
        color: #444;
    }
    .clear
    {
        clear: both;
    }
    p.info
    {
        margin: 40px auto;
        text-align: center;
        width: 600px;
    }
    p.info a
    {
        color: #006fc0;
    }
    p.info a:hover, p.info a:active
    {
        color: #0084e7;
    }
</style>
<div>
    <h3>
        Select Your theme
    </h3>



<script type="text/javascript" src="@Url.Content("~/Content/jquery.exposure.js")"></script>

<script type="text/javascript">
    $(function () {
        var gallery = $('#images');
        gallery.exposure({ carouselControls: true,
            imageControls: true,
            pageSize: 5,
            slideshowControlsTarget: '#slideshow',
            onThumb: function (thumb) {
                var li = thumb.parents('li');
                var fadeTo = li.hasClass($.exposure.activeLinkClass) ? 1 : 0.3;

                thumb.css({ display: 'none', opacity: fadeTo }).stop().fadeIn(200);

                thumb.hover(function () {
                    thumb.fadeTo('fast', 1);
                }, function () {
                    li.not('.' + $.exposure.activeLinkClass).children('img').fadeTo('fast', 0.3);
                });
            },
            onImage: function (image, imageData, thumb) {
                // Fade out the previous image.
                image.siblings('.' + $.exposure.lastImageClass).stop().fadeOut(500, function () {
                    $(this).remove();
                });

                // Fade in the current image.
                image.hide().stop().fadeIn(1000);

                if (gallery.showThumbs && thumb && thumb.length) {
                    thumb.fadeTo('fast', 1).addClass($.exposure.selectedImageClass);
                }
            },
            onCarousel: function (firstImage, lastImage) {
                $('.' + $.exposure.thumbsClass + ' li').hide().children('img.' + $.exposure.selectedImageClass).stop().css('opacity', 0.3).removeClass($.exposure.selectedImageClass);
            },
            onSlideshowPlayed: function () {
                $('.' + $.exposure.pauseSlideshowClass).css('display', 'inline');
            }
        });

        $('#left a').click(function () {
            gallery.nextImage();
        });

        $('#right a').click(function () {
            gallery.prevImage();
        });
    });
		</script>
           <div id="top">	
        <div class="panel">	
				<div id="left"><a href="javascript:void(0);"><img src="res/left.png" alt="Previous" /></a></div>				
				<ul id="images">
                @foreach (var item in Model)
                {
                    <li >
                        <a href="@Url.Content("~/Content/data1/images/" + item.Image)" style="width:150px;height:79px;">
                            <img style="width:150px;height:79px;"  src="@Url.Content("~/Content/data1/images/" + item.Image)" alt=""  />
                        </a>
                    </li>
                }				
				</ul>	
				<div id="right"><a href="javascript:void(0);"><img src="res/right.png" alt="Next" /></a></div>
				<div class="clear"></div>
			</div>
		
		<div id="main">
			<div id="exposure"></div>
			<div class="clear"></div>	
		</div>
        </div>
</div>